<template>
  <view class="UserContent">
    <view class="UserHeader">
      <view class="UserMeta">
        <view class="UserName">
          <text>{{ userData?.userName }}</text>
        </view>
        <view class="UserDept">
          <text> {{ userData?.deptName }} | {{ userData?.roleName }}</text>
        </view>
      </view>
      <view class="UserAvator">
        <img
          style="width: 100px; height: 100px; border-radius: 50%"
          src="https://s1.ax1x.com/2023/06/26/pCU2MNR.png"
        />
      </view>
    </view>
    <view class="UserApp">
      <h5>应用</h5>
      <nut-row :gutter="10">
        <nut-col :span="12">
          <nut-cell size="large" title="用户页面" round-radius="10">
            <template v-slot:icon>
              <img
                style="width: 50px; height: 50px"
                src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
              />
            </template>
            <template v-slot:title>
              <view class="AppInfo">
                <text class="AppText">待办</text>
              </view>
            </template>
          </nut-cell>
        </nut-col>
        <nut-col :span="12">
          <nut-cell size="large" round-radius="10">
            <template v-slot:icon>
              <img
                style="width: 50px; height: 50px"
                src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
              />
            </template>
            <template v-slot:title>
              <view class="AppInfo">
                <text class="AppText">统计</text>
              </view>
            </template>
          </nut-cell>
        </nut-col>
      </nut-row>
    </view>
    <view class="UserSettings">
      <h5>系统</h5>
      <nut-cell
        size="large"
        title="设置"
        round-radius="10"
        is-link="true"
        @click="toSettings"
      ></nut-cell>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Taro from "@tarojs/taro";
import { useUserStore } from "@/store/user";
import needLoginHook from "@/utils/needLoginHook";
import { UserInfo } from "./user";
//登录判断
needLoginHook();
// 登录后存储的用户数据
const userState = useUserStore();
// 用户信息
const userData = ref<UserInfo>(userState.userInfo);

/**
 * 跳转到设置页面
 */
function toSettings() {
  Taro.navigateTo({
    url: "/pages/settings/index",
  });
}
</script>

<style lang="scss">
page {
  height: 100%;
}
.UserContent {
  width: 100%;
  height: 100%;
  background-image: radial-gradient(at top right, #84b2e8 30%, #f3f7ff);

  .UserHeader {
    height: 30%;
    display: flex;
    justify-content: space-between;
    margin: 0px 50px;
    .UserMeta {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: auto;
      .UserName {
        font-weight: bold;
        font-size: 88px;
      }
      .UserDept {
        font-size: 32px;
        color: rgba(0, 0, 0, 0.45);
      }
    }
    .UserAvator {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: auto;
    }
  }

  .UserApp {
    height: 25%;
    margin: 0px 30px;
  }

  .UserSettings {
    height: 30%;
    margin: 0px 30px;
  }
}
.AppInfo {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
